<template>
  <div class="view-image">
    <template v-if="editMode">
      <template v-if="videoURL != ''">
        <video
          controls
          autoplay
          loop
          style="width:100%;height:100%;"
          frameborder="0"
          :src="detail.style.url"
          @dragstart.prevent
          @dragover.prevent
          @drop.prevent
        />
      </template>
      <i v-else class="photo_size_select_actual q-icon" size="120px" />
    </template>
    <template v-else>
      <video
        controls
        autoplay
        loop
        frameborder="0"
        style="width:100%;height:100%;"
        :src="videoURL"
        @dragstart.prevent
        @dragover.prevent
        @drop.prevent
      />
    </template>
  </div>
</template>

<script>
import BaseView from '../../BaseView'

export default {
  name: 'ViewVideo',
  components: {},
  extends: BaseView,
  props: {},
  data() {
    return {}
  },
  computed: {
    videoURL: function() {
      if (this.detail.style.url === undefined || this.detail.style.url === '') {
        return ''
      } else {
        return this.detail.style.url
      }
    }
  },
  methods: {}

}
</script>

<style scoped lang="scss">
  .view-image {
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
